  <template>
  <div class="qa">
    <el-radio-group v-model="position" style="margin-bottom:30px;">
      <el-radio-button label="choice">
        <a href="#/questions/list/choice">选择题</a>
      </el-radio-button>
      <el-radio-button label="essay">
        <a href="#/questions/list/essay">问答题</a>
      </el-radio-button>
      <el-radio-button label="category">
        <a href="#/questions/list/category">面试提技术管理</a>
      </el-radio-button>
    </el-radio-group>

    <div class="edt-tools">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="选择技术名字">
          <el-select class="w100" v-model="language" placeholder="请选择编程语言">
            <el-option label="Java" value="1"></el-option>
            <el-option label="Html" value="2"></el-option>
            <el-option label="Python" value="3"></el-option>
            <el-option label="大数据" value="4"></el-option>
            <el-option label="综合" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
          <el-button type="success" @click="dilogadd">添加技术点</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="skills" row-key="id" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column label="封面">
        <template slot-scope="scope">
          <img :src="scope.row.image" height="100" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="技术名字"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <i class="move-icon el-icon-rank"></i>
          <el-button size="mini" @click="loadOne(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加修改框 -->
    <el-dialog :title="msg+'技术点'" :visible.sync="skillwd" width="30%" center>
      <el-form ref="form" :model="skill" label-width="80px">
        <el-form-item label="技术名字">
          <el-input v-model="skill.name"></el-input>
        </el-form-item>
        <el-form-item label="编程语言">
          <el-select class="w100" v-model="skill.language" placeholder="请选择编程语言">
            <el-option label="Java" value="1"></el-option>
            <el-option label="Html" value="2"></el-option>
            <el-option label="Python" value="3"></el-option>
            <el-option label="大数据" value="4"></el-option>
            <el-option label="综合" value="5"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="封面">
          <upload ref="upimage" :imgChange="changeCall" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="skillwd=false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  addSkill,
  modifySkill,
  deleteSkill,
  oneSkill,
  getAllSkill,
  sortSkills,
  getLanguageAllSkill
} from "@/api/publish";
import Upload from '@/components/Upload/upload.vue'
// draggable 依赖于 Sortable，当npm install vuedraggable时其实就有了 sortablejs
import draggable from "vuedraggable"
import Sortable from "sortablejs"
export default {
   components: {
    Upload
  },
  data() {
    return {
      language:"1",
      souceChange: false, 
      position: "category",
      skillwd: false,
      skill: {
        name: '',
        id:null,
        image:'',
        language:null
      },
      skills: [],
      msg:'添加',
      handler:1
    };
  },
  mounted() {
    //加载所有技术
    this.loadData();
  },
  methods: {
    changeCall (url) {
      // 图片变化了 记录改变的状态 用于关闭弹层时 重新加载数据
      this.souceChange = true,
      this.skill.image=url
    },
    closeModal () {
      if (this.sourceChange) {
        this.sourceTypes()
        this.souceChange = false
      }
      this.showSourceDialog = false
    },
    //添加
    dilogadd(){
      this.skill={
        name: '',
        id:null,
        image:'',
        language:null
      }
      this.msg='添加'
      this.skillwd=true
      this.handler=1
    },
    //加载所有
    async loadData() {

      const result = await getLanguageAllSkill(this.language);
      this.skills = result.data;
      const el = document.querySelectorAll(
        ".el-table__body-wrapper > table > tbody"
      )[0];
      Sortable.create(el, {
        disabled: false, // 拖拽不可用? false 启用
        ghostClass: 'sortable-ghost', //拖拽样式
        animation: 150, // 拖拽延时，效果更好看
        onEnd: (e) => { // 拖拽结束时的触发
            let arr = this.skills; // 获取表数据
            arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]); // 数据处理，获取最新的表格数据
            this.$nextTick(function () {
              this.skills= arr;
              let ids = this.skills.map(item => {
                return item.id;
              })
              //调用后台修改排序 
              sortSkills(ids)
            })
        },
      });
    },
    //添加数据
    async save() {
      if(this.handler==1){
        const result = await addSkill(this.skill);
        console.log(result);
        this.skillwd = false;
      }else{
        const result = await modifySkill(this.skill);
        console.log(result);
        this.skillwd = false;
      }
      //重新加载
      this.loadData();
    },
    //加載詳情
    async loadOne(id){
      this.msg='編輯'
      const result = await oneSkill(id)
      this.skill=result.data
      this.skill.language=String(this.skill.language)
      this.skillwd = true
      this.handler=2
    },
    //刪除
    async del(id){
      this.$confirm('此操作将永久删除该數據, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const result = await deleteSkill(id)
          //重新加载
          this.loadData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
    },
    // 上传成功后
    uploadSuccess (url) {
      this.selectedImg =  url  // 将上传的图片认为是新组件
    },
    // 选择单张图片
    selectSinglePic () {
      this.showPicDialog = true // 显示弹层
    },
    // 取消插入图片
    cancleImg () {
      this.showPicDialog = false // 关闭弹层
    },
    // 插入图片 或者替换封面图片
    btnOKImg () {
      this.course.image=this.selectedImg //图片替换
      this.selectedImg = '' // 首先清空选择的缓存
      this.showPicDialog = false // 关闭弹层
    },
  }
};
</script>
<style lang="less" scoped>
.edt-tools {
  border-top: 3px solid #ebecf0;
  border-bottom: 3px solid #ebecf0;
  padding-top: 15px;
  padding-bottom: 15px;
}
</style>